<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <input type="text" v-model='input'>
        {{input}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /**
     * beforeCreate
     * created
     * beforeMount
     * mounted
     * beforeUpdate
     * updated
     * activated
     * deactivated
     * beforeDestroy
     * destroyed    
     * 
     * 
    */
    let Test={
        template:`<div>
            我是{{test}}<button @click='test=456'>11</button>
        </div>`,
        data(){
            return {
                test:'hello word'
            }
        },
        // 1.
        beforeCreate(){
            // 组件创建之前
            // console.log(this.text)     //undefind
            console.log('beforeCreate')
        },
        created(){
            // 组件创建之后
            // console.log(this.text)       //有值
            console.log('created')
        },
        // // 只要使用该组件，就会触发上面的钩子函数
        // // created 中可以操作数据，并且可以实现vue=>页面的影响 ， 应用：发起ajax请求
        // 2.
        // beforeMount(){
        //     // vue起作用，装载数据到DOM之前
        //     // 获取vue启动前的  只在加载时触发一次
        //     // console.log(document.body.innerHTML);    //未编译前 {{input}}
        //     console.log('beforeMount')
        // },
        // mounted(){
        //     // vue起作用，装载数据到DOM之后
        //     // 获取vue启动后的  只在加载时触发一次
        //     // console.log(document.body.innerHTML);    //编译后  test
        //     console.log('mounted');
        // },
        // // 下面两个是要数据改变后才会触发
        // beforeUpdate(){
        //     // 改变前
        //     console.log(document.body.innerHTML);
        // },
        // updated(){
        //     // 改变后
        //     console.log(document.body.innerHTML);
        // }
        // // 应用：beforeUpdate 可以获取原DOM
        // // update可以获取新DOM
        // 3.
        // 对应父组件 v-if  false 就销毁当前组件
        beforeDestroy(){    //销毁之前
            console.log('beforeDestroy')
        },
        destroyed(){         //销毁之后
            console.log('destroyed')
        },
        // 销毁，最终都是做一些功能的释放，比如：保存数据到本地之类的
        // 4.
        activated(){
            // 组件激活
            console.log('activated')
        },
        deactivated(){
            // 组件停用
            console.log('deactivated')
        }
        // 一个组件经常被销毁是不正确的  因为组件内部包含了 CSS JS 销毁成本大  所以使用激活 在组件外部包上 <keep-alive></keep-alive>
    }

    let App={
        components:{
            test:Test
        },
        template:`<div>
            <keep-alive>
                <test v-if='isExist'></test>  
            </keep-alive>
            <button @click='isExist=!isExist'></button>  
        </div>`,
        data(){
            return {
                isExist:true
            }
        }
    }
    let vue = new Vue({
        el:'#app',
        template:'<app/>',
        components:{
            app:App
        }
    })


</script>
</html>